<script setup>
import ScenicCardPanda from "@/components/scenic-card/ScenicCardPanda.vue"
import api from "@/api/index.js"
import { useRouter } from "vue-router"
import {defineProps, ref, watch, defineEmits, onActivated} from "vue"
import { userStore } from "@/stores/user.js"
import {getToken} from "@/utils/user.js";

const props = defineProps({
  update: Number
})
const emit = defineEmits(['isLoading'])

onActivated(() => {
  _getSelectedScenicSpots()
})

watch(
    () => props.update,
    () => {
      _getSelectedScenicSpots()
    }
)

const user = userStore()

const router = useRouter()

const loading = ref(false)
const scenicList = ref([])

const _getSelectedScenicSpots = () => {
  if (!getToken()) {
    return false
  }
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 2,
    cityName: user.city?.name,
    id: 0
  }
  emit('isLoading', true)
  api
      .getPandaScenicList(params)
      .then((res) => {
        scenicList.value = res.data?.list ?? []
        scenicList.value.forEach((item) => {
          item.coverImageList = item.coverImage.split(',')
        })
      })
      .finally(() => {
        loading.value = false
        emit('isLoading', false)
      })
}

_getSelectedScenicSpots()

</script>

<template>
  <div v-if="scenicList.length" class="scenic">
    <div class="header">
      <div>
        <h3>熊猫优福</h3>
        <div class="line"></div>
      </div>
    </div>
    <div>
      <template v-if="!loading">
        <ScenicCardPanda
          v-for="item in scenicList"
          :key="item.id"
          :data="item"
          class="card"
        />
      </template>
      <template v-else>
        <ScenicCardPanda
          v-for="(item, index) in Array(2)"
          :key="index"
          :loading="loading"
          :data="item"
          class="card"
        />
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.scenic {
  padding: 0 1.5rem;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
    height: 2.5rem;
    h3 {
      font-size: 1.8rem;
      color: #333333;
      font-weight: bold;
    }
    .line {
      width: 3rem;
      height: 0.5rem;
      background: linear-gradient(
              90deg,
              var(--van-primary-color) 0%,
              #fbeaa8 92%
      );
    }
  }
  .card {
    margin-bottom: 1.5rem;
  }
  .more {
    padding: 0.5rem 0 2rem 0;
    font-size: 1.4rem;
    color: #cccccc;
    text-align: center;
  }
}
</style>